---
title: Loading
description: A versatile loading component with multiple animation styles and customizable appearance for indicating loading states.
---
import { LoadingExample, CustomSizeAndDuration, DotsLineExample } from "./loading/loading.example";

## Overview

The Loading component provides a consistent way to display loading states throughout your application. It's designed to give users clear feedback when content is being loaded or processed, with multiple animation styles and customizable options.

## Usage

```tsx
import { Loading } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <Loading />
      <Loading size="lg" />
      <Loading variant="dots" />
    </div>
  );
}
```

## Examples

### Basic Loading
Default loading spinner with standard animation.

<LoadingExample />

### Custom Size and Duration
Loading components with different sizes and animation durations.

<CustomSizeAndDuration />

### Dots Line Animation
Alternative loading animation using dots in a line pattern.

<DotsLineExample />

## Features

- **Multiple Variants**: Different animation styles (spinner, dots)
- **Size Options**: Multiple sizes for different contexts
- **Customizable Duration**: Configurable animation speed
- **Accessibility**: Built-in accessibility support with proper ARIA attributes
- **Responsive Design**: Adapts to different screen sizes
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Customizable Styling**: Extensive styling options through className prop

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"spinner" \| "dots"` | `"spinner"` | The animation style of the loading component |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The size of the loading component |
| `duration` | `number` | `1000` | Animation duration in milliseconds |
| `className` | `string` | `undefined` | Additional CSS classes to apply |

## Variants

### Spinner
- Circular spinning animation
- Default variant for most use cases
- Smooth, continuous rotation
- Ideal for general loading states

### Dots
- Animated dots in a line pattern
- Alternative visual style
- Sequential animation
- Good for text-based loading contexts

## Structure

The Loading component is a simple, self-contained component that renders as a single div element with appropriate styling and accessibility attributes.

## Styling

The Loading component includes default styling with:

- Consistent sizing across variants
- Smooth CSS animations
- Dark mode support
- Responsive design
- Focus states for accessibility
- Customizable through className prop

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<Loading 
  variant="spinner"
  size="lg"
  className="custom-loading-class"
/>
```

## Accessibility

The Loading component is built with accessibility in mind:

- **ARIA Attributes**: Proper ARIA labels for screen readers
- **Live Regions**: Announces loading state changes
- **Focus Management**: Maintains focus context during loading
- **High Contrast**: Maintains proper contrast ratios
- **Semantic HTML**: Uses appropriate HTML elements and roles
- **Screen Reader Support**: Announces loading status appropriately